<template>
  <div style="margin: 5px;border: none">
    <el-icon :class="{ jump: isHover }" class="icon" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <Money @click="router.push('/instruction')"></Money>
    </el-icon>
    <!-- <el-dropdown
        :visible-arrow="false"
        style="border: none"
        v-model:visible="dropdownVisible"
        @command="handleCommand"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
    >
      <el-icon
          :class="{ jump: isHover }"
          class="icon"
      >
        <Money @click="router.push('/instruction')"></Money>
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu class="custom-dropdown-menu" style="border: none">
          <el-dropdown-item style="border: none" command="a">Option 1</el-dropdown-item>
          <el-dropdown-item command="b">Option 2</el-dropdown-item>
          <el-dropdown-item command="c">Option 3</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import 'element-plus/dist/index.css'
import { Money } from '@element-plus/icons-vue'
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const isHover = ref(false)
const dropdownVisible = ref(false)
const props = defineProps({
  iconColor: {
    type: String,
    default: '', // 默认颜色为白色
  }
});
const handleMouseEnter = () => {
  isHover.value = true
  dropdownVisible.value = true
}

const handleMouseLeave = () => {
  isHover.value = false
  // 延迟关闭下拉框，以便用户可以移动到下拉菜单上
  setTimeout(() => {
    if (!isHover.value) {
      dropdownVisible.value = false
    }
  }, 200)
}

const handleCommand = (command) => {
  console.log(command)
}
</script>

<style scoped>
.iconfont {
  border: none;
  transition: transform 0.2s ease-in-out; /* 添加过渡效果 */
}
.jump {
  border: none;
  animation: jumpAnimation 0.5s ease 1 !important; /* 添加跳动动画 */
}

@keyframes jumpAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* 向上跳动 */
  }
  100% {
    transform: translateY(0);
  }
}

.custom-dropdown-menu {
//border: none !important; /* 移除边框 */
  box-shadow: none !important; /* 移除阴影 */
  padding: 0;
  border: none;
}
.icon{
  font-size: 30px;
  cursor: pointer;
  border: none;
  color: v-bind(iconColor);
}
</style>